<template>
    <div id="app2">
        <el-row>
            <el-col :span="20">
                <el-input v-model="searchText" placeholder="查找By姓名" :on-icon-click="handleSearch" icon="search"></el-input>
            </el-col>
            <el-col :span="1">&nbsp;</el-col>
            <el-col :span="3">
                <el-button @click="handleAdd">新增</el-button>
            </el-col>
        </el-row>
        <el-table :data="showData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180" :filter-method="nameFilter">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    name: 'app2',
    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎a',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎b',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎c',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎d',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            searchText: ''

        };
    },
    methods: {
        handleSearch() {
        },
        handleEdit(index, row) {
            console.log(row);
        },
        handleDelete(index, row) {
           this.tableData=_.remove(this.tableData,function(item){
                    return row!=item;
            });
        },
        handleAdd() {

        },
        nameFilter(value,row){
            alert(value)
            if (value=="王小虎a") {
                return true;
            }
        }

    },
    computed:{
        showData(){
            var me=this;
            var data=_.filter(this.tableData,function(item) {
                return item.name.indexOf(me.searchText)!=-1;
            });
            return data;
        }
    }
}
</script>
<style>
</style>
